<template>
  <q-layout view="hHh Lpr lff" >
    <q-header
      :reveal="true"
      :bordered="false"
      class="page-docs"
      height-hint="58">
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          @click="toggleLeftDrawer"
          aria-label="Menu"
          icon="menu"
        />

        <q-btn flat no-caps no-wrap class="q-ml-xs" v-if="$q.screen.gt.xs" to="/">
          <q-icon :name="fabYoutube" color="red" size="28px" />
          <q-toolbar-title shrink class="text-weight-bold">
            HUI DOCS
          </q-toolbar-title>
        </q-btn>

        <q-space />

        <div class="YL__toolbar-input-container row no-wrap">
          <q-input dense borderless clearable
            v-model="search"
            @keydown.enter="showSearchDialog = true"
            placeholder="Search all files" 
            style="font-size: 16px; font-weight: 500; font-family: Montserrat,Roboto,-apple-system,Avenir,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;"
            class="col no-wrap q-pl-sm q-pr-md rounded-borders custom-input">
            <template v-slot:append>
              <q-btn round dense flat icon="search" @click="showSearchDialog = true"/>
            </template>
          </q-input>

          <q-dialog v-model="showSearchDialog" >
            <q-card style="max-height: 98vh; max-width: 98vw;">
              <q-card-section class="q-pa-md">
                <q-btn round flat icon="close" @click="showSearchDialog = false"
                  class="absolute"
                  style="top:3px; inset-inline-end: 10px;"
                  />
              </q-card-section>
              <q-card-section class="q-pa-md">
                <q-input dense borderless clearable 
                  v-model="search" 
                  placeholder="Search name or content"
                  style="font-size: 16px; font-weight: 500; font-family: Montserrat,Roboto,-apple-system,Avenir,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;"
                  class="no-wrap q-pl-sm q-pr-md rounded-borders custom-input"
                  >
                  <template v-slot:append>
                    <q-btn round flat dense icon="search" />
                    <q-btn round flat dense icon="mdi-filter" @click="drawerRight = !drawerRight"  />
                  </template>
                </q-input>
              </q-card-section>
              <q-card-section class="q-pa-none ">
                <q-tabs align="left" dense
                  outside-arrows
                  mobile-arrows
                  indicator-color="primary"
                  active-color="primary"
                >
                  <q-tab name="0" icon="mdi-select-all" label="ALL" />
                  <q-tab name="1" icon="mdi-folder" label="Folder" />
                  <q-tab name="10" icon="mdi-file-word" label="Docs" />
                  <q-tab name="20" icon="mdi-file-excel" label="Sheet" />
                  <q-tab name="30" icon="mdi-file-powerpoint" label="Slide" />
                  <q-tab name="40" icon="mdi-draw" label="Draw" />
                  <q-tab name="50" icon="mdi-file-pdf-box" label="PDF" />
                  <q-tab name="60" icon="mdi-file-image" label="Image" />
                  <q-tab name="70" icon="mdi-file-video" label="Video" />
                  <q-tab name="80" icon="mdi-folder-zip" label="Zip" />
                  <q-tab name="250" icon="mdi-file" label="Other" />
                </q-tabs>
                <q-separator/>
              </q-card-section>

              <q-layout view="hHh LpR fff" container class=" shadow-2 rounded-borders" style="height: 65vh;">

                <q-drawer
                  side="right"
                  v-model="drawerRight"
                  show-if-above
                  bordered
                  :width="200"
                  :breakpoint="390"
                >
                  <q-scroll-area class="fit">
                    <div class="q-pa-sm">
                      <div class="q-my-sm">
                        <div>Owner</div>
                        <q-checkbox label="MySelf"/>
                      </div>
                      <q-separator/>

                      <div class="q-my-sm">
                        <div>Folder</div>
                        <q-input dense borderless
                          class="no-wrap q-pl-sm q-pr-md rounded-borders custom-input"
                          placeholder="Enter folder name">
                          <template v-slot:append>
                            <q-btn round flat dense icon="mdi-check" />
                          </template>
                        </q-input>
                      </div>
                      <q-separator/>

                      <div class="q-my-sm">
                        <div>Time</div>
                        <q-option-group
                          v-model="timeOption"
                          :options="timeOptions"
                        />
                      </div>

                    </div>
                  </q-scroll-area>
                </q-drawer>

                <q-page-container>
                  <q-page class="q-pa-md" >
                    <q-list >
                      <q-item clickable v-for="n in 4" :key="n">
                        <q-item-section side>
                          <q-icon size="sm" name="search" />
                        </q-item-section>
                        <q-item-section>
                          <q-item-label class="ellipsis-3-lines">Item with captionItem with captionItem with captionItem with caption</q-item-label>
                          <q-item-label class="ellipsis-3-lines" caption>Caption CaptionCaption CaptionCaption CaptionCaption CaptionCaption CaptionCaption Caption</q-item-label>
                        </q-item-section>
                      </q-item>

                    </q-list>
                  </q-page>
                </q-page-container>
              </q-layout>

              <!--
              <q-card-section style="height: 70vh; width: 70vw;" class="scroll">
                <p v-for="n in 2" :key="n">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.</p>
              </q-card-section>

              <q-separator />-->

            </q-card>
          </q-dialog>
        </div>

        <q-space />

        <div class="q-gutter-sm row items-center no-wrap">
          <q-btn round dense flat color="grey-8" :icon="$q.dark.isActive ? 'light_mode' : 'dark_mode'" @click="onDarkToggle">
          </q-btn>
          <q-btn round dense flat color="grey-8" icon="notifications">
            <q-badge color="red" text-color="white" floating>
              2
            </q-badge>
            <q-tooltip>Notifications</q-tooltip>
          </q-btn>
          <q-btn-dropdown round flat icon="mdi-account" class="btn-dropdown-hide-droparrow">
            <div class="no-wrap ">
              <div class="column">
                <div class="q-ma-sm" style="max-width: 350px">
                    <q-expansion-item group="accountgroup" expand-separator>
                      <template v-slot:header>
                        <q-item-section avatar>
                          <q-avatar>
                            <img src="https://cdn.quasar.dev/img/boy-avatar.png">
                          </q-avatar>
                        </q-item-section>

                        <q-item-section>
                          我是谁
                        </q-item-section>

                        <q-item-section side>
                          <div class="row items-center">
                            <q-icon name="star" color="red" size="24px" />
                          </div>
                        </q-item-section>
                      </template>

                      <q-card>
                        <q-card-section>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
                          commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
                          eveniet doloribus ullam aliquid.
                        </q-card-section>
                      </q-card>
                    </q-expansion-item>

                    <q-expansion-item
                      icon="mdi-theme-light-dark"
                      group="accountgroup"
                      expand-separator
                      label="外观"
                      >
                      <q-expansion-item
                        :header-inset-level="1"
                        hide-expand-icon
                        icon="light_mode"
                        label="明亮模式"
                        @click="$q.dark.set(false)"
                      />
                      <q-expansion-item
                        :header-inset-level="1"
                        hide-expand-icon
                        icon="dark_mode"
                        label="暗黑模式"
                        @click="$q.dark.set(true)"
                      />
                      <q-expansion-item
                        :header-inset-level="1"
                        hide-expand-icon
                        icon="mdi-format-list-numbered-rtl"
                        label="RTL模式"
                        @click="doToggleRtlOrLtr"
                      />
                    </q-expansion-item>

                    <q-expansion-item
                      icon="mdi-web"
                      group="accountgroup"
                      expand-separator
                      label="语言"
                      >
                      <q-expansion-item
                        :header-inset-level="1"
                        expand-separator
                        hide-expand-icon
                        
                        label="简体中文"
                      />
                      <q-expansion-item
                        :header-inset-level="1"
                        expand-separator
                        hide-expand-icon
                        
                        label="英文"
                      />
                    </q-expansion-item>

                    <q-expansion-item
                      hide-expand-icon 
                      group="accountgroup"
                      icon="mdi-wrench-cog-outline"
                      label="设置"
                      @click="console.log('settings')"/>
                      
                    <q-separator />

                    <q-expansion-item
                      hide-expand-icon 
                      group="accountgroup"
                      icon="mdi-logout"
                      label="退出登陆"
                      to="/login"
                      @click="console.log('Log out')"/>
                      
                </div>
              </div>
            </div>
          </q-btn-dropdown>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      :mini="false"
      class="page-docs"
      :width="350"
    >
      <q-scroll-area class="fit">
        <div class="q-pa-sm">
          <div class="flex flex-center" style="height: 50px;" v-if="!$q.screen.gt.xs" >
            <q-btn flat no-caps no-wrap align="around" size="xl" to="/">
              <q-icon :name="fabYoutube" color="red" size="34px"/>
              <q-toolbar-title shrink class="text-weight-bold">
                HUI DOCS
              </q-toolbar-title>
            </q-btn>

          </div>

          <q-separator class="q-mt-md " v-if="!$q.screen.gt.xs" />

          <q-expansion-item
            expand-separator
            hide-expand-icon
            icon="mdi-home"
            label="首页"
            class="custom-expansion q-mt-sm"
            active-class="custom-expansion-active"
            to="/"
            />

          <q-expansion-item
            expand-separator
            icon="mdi-folder-home"
            label="我的空间"
            class="custom-expansion"
            active-class="custom-expansion-active"
            to="/drive/me"
            >
            <q-card>
              <q-card-section>
                <q-tree
                  :nodes="treeData"
                  v-model:selected="selected"
                  :default-expand-all="false"
                  node-key="label"
                  no-selection-unset
                  no-connectors
                  dense
                >
                  <template v-slot:default-header="prop">
                    <div class="row items-center" style="">
                      <q-icon :name="prop.node.icon || 'share'" color="orange" class="q-mr-sm" />
                      <q-item-section>
                        <q-item-label lines="1">{{ prop.node.label }}</q-item-label>
                      </q-item-section>
                      <div class="q-gutter-xs">
                        <q-btn flat dense round icon="mdi-dots-horizontal" @click="doClickTree"/>
                      </div>
                    </div>
                  </template>
                </q-tree>
              </q-card-section>
            </q-card>
          </q-expansion-item>

          <q-expansion-item
            expand-separator
            icon="mdi-folder-account"
            label="共享空间"
            class="custom-expansion"
            active-class="custom-expansion-active"
            to="/drive/shared"
          >
          </q-expansion-item>

          <q-expansion-item
            expand-separator
            hide-expand-icon
            icon="mdi-book-open-variant"
            label="知识库"
            class="custom-expansion"
            active-class="custom-expansion-active"
            to="/"
            />

          <q-expansion-item
            expand-separator
            hide-expand-icon
            icon="mdi-star"
            label="收藏"
            class="custom-expansion"
            active-class="custom-expansion-active"
            to="/starred"
            />

          <q-expansion-item
            expand-separator
            hide-expand-icon
            icon="mdi-delete"
            label="回收站"
            class="custom-expansion"
            active-class="custom-expansion-active"
            to="/deleted"
            />

          <q-separator class="q-mt-md q-mb-lg" />

          <q-expansion-item
            expand-separator
            hide-expand-icon
            icon="mdi-wrench-cog-outline"
            label="设置"
            class="custom-expansion"
            active-class="custom-expansion-active"
            to="/deleted"
            />

          <q-expansion-item
            expand-separator
            hide-expand-icon
            icon="mdi-help"
            label="帮助"
            class="custom-expansion"
            active-class="custom-expansion-active"
            to="/deleted"
            />

          <q-expansion-item
            expand-separator
            hide-expand-icon
            icon="mdi-logout"
            label="退出登陆"
            class="custom-expansion"
            active-class="custom-expansion-active"
            to="/login"
            />

          <q-separator class="q-mt-md q-mb-lg" />

          <div class="q-px-md text-grey-9">
            <div class="row items-center q-gutter-x-sm q-gutter-y-xs">
              <a
                v-for="button in buttons1"
                :key="button.text"
                class="YL__drawer-footer-link"
                href="javascript:void(0)"
              >
                {{ button.text }}
              </a>
            </div>
          </div>
          <div class="q-py-md q-px-md text-grey-9">
            <div class="row items-center q-gutter-x-sm q-gutter-y-xs">
              <a
                v-for="button in buttons2"
                :key="button.text"
                class="YL__drawer-footer-link"
                href="javascript:void(0)"
              >
                {{ button.text }}
              </a>
            </div>
          </div>
        </div>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <q-page class="q-pa-sm page-docs">
        <router-view />

        <!-- place QPageScroller at end of page -->
        <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
          <q-btn fab icon="keyboard_arrow_up" color="accent" />
        </q-page-scroller>

      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import { ref } from 'vue'
import { fabYoutube } from '@quasar/extras/fontawesome-v6'
import { Dark } from 'quasar'

export default {
  name: 'MyLayout',

  setup () {
    const leftDrawerOpen = ref(false)
    const search = ref('')

    function toggleLeftDrawer () {
      leftDrawerOpen.value = !leftDrawerOpen.value
    }

    return {
      fabYoutube,

      leftDrawerOpen,
      search,

      toggleLeftDrawer,

      selected: ref(null),
      showSearchDialog: ref(false),
      drawerRight: ref(false),
      drawerLeft: ref(false),

      timeOption: ref(null),
      timeOptions: [
        {
          label: 'All',
          value: 0
        },
        {
          label: 'Last day modified',
          value: 1
        },
        {
          label: 'Last week modified',
          value: 2
        },
        {
          label: 'Last month modified',
          value: 3
        },
        {
          label: 'Last day created',
          value: 11
        },
        {
          label: 'Last week created',
          value: 12
        },
        {
          label: 'Last month created',
          value: 13
        },
      ],

      buttons1: [
        { text: 'About' },
        { text: 'Press' },
        { text: 'Copyright' },
        { text: 'Contact us' },
        { text: 'Creators' },
        { text: 'Advertise' },
        { text: 'Developers' }
      ],
      buttons2: [
        { text: 'Terms' },
        { text: 'Privacy' },
        { text: 'Policy & Safety' },
        { text: 'Test new features' }
      ],
      treeData: [
        {
          label: 'Good food',
          icon: 'restaurant_menu',
          children: [
            { label: 'Quality ingredients' },
            { label: 'Good recipe' }
          ]
        },
        {
          label: 'Good service',
          icon: 'room_service',
          children: [
            {
              label: 'Prompt attention',
              children: [
                { label: 'child1' },
                { label: 'child2' }
              ]
            },
            { label: 'Professional waiter' }
          ]
        },
        {
          label: 'Pleasant surroundings',
          icon: 'photo',
          children: [
            {
              label: 'Happy atmosphere'
            },
            {
              label: 'Good table presentation'
            },
            {
              label: 'Pleasing decor'
            }
          ]
        }
      ],
      doClickTree(e) {
        console.log('good', e)
        e.preventDefault()
      },
      onDarkToggle(e) {
        Dark.toggle()
      },
      doToggleRtlOrLtr(e) {
        let direction = document.getElementById('q-app')['style']['direction']
        if (direction == 'rtl') {
          direction = 'ltr'
        } else {
          direction = 'rtl'
        }
        document.getElementById('q-app')['style']['direction'] = direction
        document.getElementsByTagName('html')[0]['style']['direction'] = direction
        document.getElementsByTagName('body')[0]['style']['direction'] = direction
      }
    }
  }
}
</script>

<style lang="sass">

.YL
  &__toolbar-input-container
    min-width: 150px
    width: 35%

  &__drawer-footer-link
    color: $grey
    text-decoration: none
    font-weight: 500
    font-size: .75rem

    &:hover
      color: $grey-7

.search-dialog-active-class
  background-color: red !important
</style>
